<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<?php  
 $this->headLink()->headLink(array('rel' => 'shortcut icon', 'href' => $this->baseUrl('public/images/favicon.ico')), 'PREPEND')
                  ->appendStylesheet($this->baseUrl('public/scripts/jquery/uploadify/uploadify.css'))
                  ->appendStylesheet($this->baseUrl('public/scripts/jquery/jcrop/jquery.jcrop.css'));				  
 $this->headScript()->appendFile($this->baseUrl('public/scripts/jquery/jquery.min.js'))
                    ->appendFile($this->baseUrl('public/scripts/jquery/uploadify/swfobject.js')) 
                    ->appendFile($this->baseUrl('public/scripts/jquery/uploadify/jquery.uploadify.min.js'))
                    ->appendFile($this->baseUrl('public/scripts/jquery/jcrop/jquery.jcrop.min.js'));					
echo $this->headLink(), $this->headScript();
?>

<title>设置头像</title>
<script type="text/javascript">
        
		
		$(function(){
			
			var temp_photo;
			$("#fileField").uploadify({
					'uploader'       : "<?php echo $this->baseUrl('public/scripts/jquery/uploadify/uploadify.swf')?>",
					'buttonImg'      : "<?php echo $this->baseUrl('public/scripts/jquery/uploadify/uploadify.jpg')?>",
					'script'         : "<?php echo $this->baseUrl('test/upfile/'); ?>",
					'cancelImg' 	 : "<?php echo $this->baseUrl('public/scripts/jquery/uploadify/cancel.png')?>",
					'folder'         : 'uploads',
					'queueID'        : 'fileQueue',
					'queueSizeLimit' : '5',
					'auto'			 : true,
					'multi'          : true,
					'fileExt'        : '*.jpg;*.gif;*.png;',
					'fileDesc'		 : '请选择*.jpg;*.gif;*.png;的文件',
					'sizeLimit'      : '3145725',
					'onComplete'     : function (e,queueId,fileObj,data) {   
						  data  =data.split("|");
					       
						  if(typeof(temp_photo) != "undefined"){    
							  $.post("<?php echo $this->baseUrl('space/unlink/'); ?>",{temp_photo:temp_photo});			
						   }
						   temp_photo=data[1];
						   $("#avatar").val(data[1]);
						   img_path="<?php echo $this->baseUrl();?>/"+ data[1];
						   $("#jcrop_box").html("<img width=300 height=230 id='cropbox' src='"+ img_path + "' />");
						   $("#preview").html("<img width=120 height=120 id='jcrop_preview' src='"+ img_path + "' />");
						   $("#preview_50").html("<img width=50 height=50 id='jcrop_preview_50' src='"+ img_path + "' />");
						   $("#preview_30").html("<img width=30 height=30 id='jcrop_preview_30' src='"+ img_path + "' />");
						   $("#submit_btn").attr('disabled',false);
						   jcrop();
					}				
				});
			
			
			
		});

		
		function jcrop() {
			$('#cropbox').Jcrop({aspectRatio: 1,onSelect: updateCoords, onChange: showPreview, setSelect: [ 90, 55, 120, 120 ], minSize: [ 120, 120 ], maxSize: [ 300, 230 ]});
		}
		
		function updateCoords(c){
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
		}
		function showPreview(coords)
		{
			if (parseInt(coords.w) > 0)
			{
				var rx = 120 / coords.w;
				var ry = 120 / coords.h;

				jQuery('#jcrop_preview').css({
					width: Math.round(rx * 300) + 'px',
					height: Math.round(ry * 230) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
				
				var rx_50 = 50 / coords.w;
				var ry_50 = 50 / coords.h;

				jQuery('#jcrop_preview_50').css({
					width: Math.round(rx_50 * 300) + 'px',
					height: Math.round(ry_50 * 230) + 'px',
					marginLeft: '-' + Math.round(rx_50 * coords.x) + 'px',
					marginTop: '-' + Math.round(ry_50 * coords.y) + 'px'
				});	
				
				var rx_30 = 30 / coords.w;
				var ry_30 = 30 / coords.h;

				jQuery('#jcrop_preview_30').css({
					width: Math.round(rx_30 * 300) + 'px',
					height: Math.round(ry_30 * 230) + 'px',
					marginLeft: '-' + Math.round(rx_30 * coords.x) + 'px',
					marginTop: '-' + Math.round(ry_30 * coords.y) + 'px'
				});			
			}
		}

				
			
        
</script>
<style>
*{font-family:"宋体";font-size: 12px;}
#page_right{ width:495px;	padding-top:15px}
#page_jcrop{width:320px;	float:left}
#page_preview{width:165px;	float:left}
.photo_title{font-size:14px;	padding:6px}
.photo_title_line{border-bottom:1px solid #eee}
.explain{padding-top:10px;	line-height:20px;	color:#999999}
.file_sub{padding-top:10px;	padding-bottom:10px;}
#jcrop_box{	width:300px;	height:230px;	margin:25px 0 0 0;	border:1px solid #cdcdcd}
.submit_btn{padding-top:10px}
.submit_btn input{background: #3B5998; border: medium none; color: #FFFFFF; cursor: pointer; height: 24px; letter-spacing: 1px; line-height: 20px; padding: 0 5px;}

#preview{width:120px;	height:120px;	margin:0;	overflow:hidden;	border:1px solid #cdcdcd}
#preview_50{width:50px;	height:50px;	margin:0;	overflow:hidden;	border:1px solid #cdcdcd;	margin-top:4px}
#preview_30{width:30px;	height:30px;	margin:0;	overflow:hidden;	border:1px solid #cdcdcd;	margin-top:4px}

</style>



</head>

<body>
<div style="width:80%;margin:0 auto;">
<form method="post"action="<?php echo $this->baseUrl ?>/space/saveavatar/" name="ff" id="ff" enctype="multipart/form-data">   
    <input type="hidden" id="x" name="x" />
	<input type="hidden" id="y" name="y" />
	<input type="hidden" id="w" name="w" />
	<input type="hidden" id="h" name="h" />  
	<input type="hidden" id="avatar" name="avatar" />  
	  

	<div id="page_right">
		<div id="page_jcrop">
			<h1 class="photo_title">设置新头像</h1>
			<div class="photo_title_line"></div>
			<div class="explain">使用真实照片，展示真我风采支持jpg、gif、png格式可以在大照片中剪裁满意的部分。原图大小限制为2M。</div>	
			<div class="file_sub">
				<div id="fileQueue" style="float:left; width:100%;"></div>		
					<div style="float:left;margin-top:5px;">
                      <input id="fileField" name="fileField" type="file" />				
					</div>	
			</div>		
			<div style="" id="jcrop_box"></div>
			<div class="submit_btn"><input type="submit" id="submit_btn" value="保存头像" disabled /></div>
		</div>
		<div id="page_preview">
			<div style="height:143px!important;height:138px;"></div>
			<div id="preview"></div> <div class="explain">大头像120X120像素</div>
			<div id="preview_50"></div> <div class="explain">中头像50X50像素(自动生成)</div>
			<div id="preview_30"></div> <div class="explain">小头像30X30像素(自动生成)</div>
		</div>
	</div>  
	  
	  

</form>
</div>

</body>
</html>